<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	div{
		margin-left: 50%;
		margin-top:50px;
		border:1px solid blue;
		text-align: center;
		width: 200px;
		height: 100px;
		background-color: yellow;
		margin-bottom: 40px;
	}
	div.a{/*chrome    -webkit-*/
		-webkit-transform: rotate(-30deg);
	}
	div.b{
		-webkit-transform: translate(-50px,10px);
	}
	div.c{
		-webkit-transform: scale(1.5,1);
	}
	div.d{
		-webkit-transform:skew(10deg,10deg);
	}
	div.e{
		-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
	}
	div.f{
		transform: translate3d(5px,5px,15px);
	}
</style>
<body>
	<div class="a">通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。</div>
	<div class="b">通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数</div>
	<div class="c">通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数</div>

	<div class="d">通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数</div>

	<div class="e">matrix() 方法把所有 2D 转换方法组合在一起。matrix()方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素</div>

	<div class="f">translate3d(x,y,z)</div>

</body>
</html>